<template>
    <view class="container" :class="isShowFilter ? 'stop-scroll' : ''">
        <search-bar :placeholderText="placeholderText" :cartnum="num" :actions="actions" @searchFn="searchFn"
            @actionFn="actionFn">
        </search-bar>

        <view>
            <view class="nav-bar">
                <nav-tree-x class="nav-bar-scroll" v-if="classifyList" :tree-data="classifyList" :active-id="activeId"
                    @treeClickEvent="treeClickEvent"></nav-tree-x>
                <view class="nav-bar-action">
                    <view class="line"></view>
                    <view class="filter-box" @click="filter">
                        <iconsfont class="filter-box-icon" size="28" :class="getIsFilter() ? 'icon-green' : ''"
                            customIcons="icon-shaixuan"></iconsfont>
                        <text class="filter-box-text">筛选</text>
                    </view>
                </view>
            </view>
            <view class="main-dom product-main-1">
                <view :class="tempType == 1 ? 'p-b-120' : ''">
                    <product-list v-if="loadOk" ref="swiperIndex" :requestData="requestData" :height="listHeight"
                        :isHideProImg="isHideProImg" @sku="sku" @amountProp="amountProp" :infoType="'0'"
                        :displayData="displayData" :tempType="tempType" :ProductLineIds="ProductLineIds"
                        :isOnShow="isOnShow" @upFavorite="upFavorite" @isUpNum="isUpNum" :isLimit="isLimit"
                        :isClass="isClass">
                    </product-list>
                </view>
            </view>
        </view>
        <uni-popup type="bottom" ref="popSku" @change="skuChange" class="flxedtop">
            <product-spec v-if="showPopSku" :data="optPopup.data" :tempType="tempType" :fresh="optPopup.change"
                :popup-type="optPopup.type" :requestData="requestData" @changeProductData="changeProductData"
                @closePopup="closePopup" @amountProp="amountProp" @addCart="addCart" @addBatch="addBatch"
                @setCarListFunc="setCarListFunc">
            </product-spec>
        </uni-popup>
        <uni-popup ref="popAmountTip" type="center" class="popAmountTip" :animation="false" :maskClick="true">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>输入订购数量</text>
                </view>
                <!-- #ifdef APP -->
                <input confirm-type="search" :auto-focus="true" maxlength="10" type="digit" v-model="popinputAmount"
                    class="btn-input" />
                <!-- #endif -->
                <!-- #ifndef APP -->
                <input confirm-type="search" :focus="isFocus" maxlength="10" :selection-start="selectionStart"
                    :selection-end="selectionEnd" type="digit" v-model="popinputAmount" class="btn-input" />
                <!-- #endif -->

                <view class="pop-action">
                    <view @click="popAmountClose">取消</view>
                    <view @click="popAmountConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
        <uni-drawer :width="320" ref="showRight" mode="right" :mask-click="true">
            <view class="drawer-view">
                <scroll-view class="drawer-scroll" scroll-y="true">
                    <view class="filter-item tag-item">
                        <text class="label">价格区间</text>
                        <view class="tags">
                            <view class="filter-price">
                                <view class="price-box">
                                    <input type="digit" v-model="requestData.minPrice" placeholder="最低价" />
                                </view>
                                <view class="line">至</view>
                                <view class="price-box">
                                    <input type="digit" v-model="requestData.maxPrice" placeholder="最高价" />
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">排序</text>
                        <view class="tags">
                            <text class="tag-item" :class="{ selected: priceSort == 0 }" @click="sort(0)">默认排序</text>
                            <text class="tag-item" :class="{ selected: priceSort == 1 }" @click="sort(1)">价格按低到高</text>
                            <text class="tag-item" :class="{ selected: priceSort == 2 }" @click="sort(2)">价格从高到低</text>
                            <text class="tag-item" :class="{ selected: priceSort == 3 }" @click="sort(3)">编码从低到高</text>
                            <text class="tag-item" :class="{ selected: priceSort == 4 }" @click="sort(4)">编码从高到低</text>
                        </view>
                    </view>
                    <view class="filter-item tag-item" v-if="classData.length > 0">
                        <text class="label">分类</text>
                        <view class="tags" style="justify-content: flex-start">
                            <text class="tag-item" style="width: auto; padding: 0 20rpx"
                                v-for="(item, index) in classData" :class="{ selected: item.checked }"
                                @click="changeClass(index)">{{ item.name }}</text>
                        </view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">商品品牌</text>
                        <view class="tags" v-if="brands.length > 0">
                            <text class="tag-item" v-for="(item, index) in brands" :class="{ selected: item.checked }"
                                @click="changeBrand(index)">{{ item.Name }}</text>
                        </view>
                        <view v-else class="color3">该分类没有对应品牌</view>
                    </view>
                    <view class="filter-item tag-item">
                        <text class="label">商品标签</text>
                        <view class="tags" v-if="tags.length > 0">
                            <text class="tag-item" v-for="(item, index) in tags" :class="{ selected: item.checked }"
                                @click="changeTag(index)">{{ item.Name }}</text>
                        </view>
                        <view v-else class="color3">暂无对应商品标签</view>
                    </view>
                </scroll-view>
                <view class="drawer-bottom-bar">
                    <button class="btn btn-reset" @click="cancelFilterBrands">
                        <text>重置</text>
                    </button>
                    <button class="btn btn-set" @click="filterBrandFn1">
                        <text>确定</text>
                    </button>
                </view>
            </view>
        </uni-drawer>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import searchBar from "@/components/common/search-bar.vue"
import tabBar from "@/components/common/tab-bar.vue"
import productListFilter from "@/components/product/product-list-filter.vue"
import productList from "@/components/productClass/product-list.vue"
import navTree from "@/components/product/nav-tree.vue"
import productSpec from "@/components/productClass/product-spec.vue"
import navTreeX from "@/components/product/nav-tree-x.vue"
import navFirst from "@/components/product/nav-first.vue"
import { getPlatform } from "@/uni-sub-base/utils/platformUtil.js"
import { getElementHeight, getElementTop } from "@/uni-sub-base/utils/elementUtil.js"
import { getProductDisplay } from "@/utils/appInit.js"

import { getProductTypeTree, GetProductCategoryList, productBrandList, getTagList } from "@/service/api/product.js"
import { getCartTotal, getUserCarList } from "@/utils/cartUtil.js"
import config from "@/config/config.js"
import numPopup from "@/components/order/num-popup.vue"
import utilsOld from "@/utils/utilsOld.js"
import { eventBus } from "@/utils/eventBus.js"
import { updateCart } from "@/utils/cartUtil.js"
export default {
    components: {
        searchBar,
        productListFilter,
        productList,
        tabBar,
        navTree,
        productSpec,
        navTreeX,
        navFirst,
    },
    props: {
        //列表位置 0商品 1无单退货
        tempType: {
            type: Number,
            default: 0,
        },
        isOnShow: {
            type: Boolean,
            default: true,
        },
        isClass: {
            type: Boolean,
            default: false,
        },
        isLimit: {
            type: Boolean,
            default: false,
        },
        currentClass: {
            type: String,
            default: "0",
        },
        classId: {
            type: String,
            default: "0",
        },
        productTagId: {
            type: String,
            default: "",
        },
        productBrandId: {
            type: String,
            default: "",
        },
        ProductLineIds: {
            type: String,
            default: ""
        }
    },
    watch: {
        isOnShow(e) { },
    },
    data() {
        return {
            priceSort: 0,
            popinputAmount: "",
            inputAmount: "",
            numPopShow: false,
            initClassify: false,
            activeId: -1,
            classifyList: [],
            secondClassifyList: [],
            isFold: true,
            skuModel: false,
            isHideProImg: false,
            actions: [],
            placeholderText: "请输入商品名称",
            searchValue: "",
            tabIndex: 0,
            tabs: [
                {
                    title: "综合",
                },
                {
                    title: "常购",
                },
                {
                    title: "收藏",
                },
                {
                    title: "促销",
                },
            ],
            navHeight: 0, //nav所需高度
            listHeight: 0, //list所需高度
            listHeight1: 0, //list所需高度
            listHeight2: 0, //list所需高度
            listHeightNoneSub: 0, //list所需高度
            initHeight: 0,
            productDatas: [],
            navItems: [],
            currentNav: 0,
            isloadding: false,
            loadOk: false,
            // sku 商品规格弹窗
            optPopup: {
                data: {},
                type: "",
                change: false,
                show: true,
            },
            isClosePop: false,
            treeOk: false,
            tags: [],
            brands: [],
            // 请求参数
            requestData: {
                ProductType: 1,
                OrderBy: "display_sequence",
                Sort: "desc",
                SecondaryOrderBy: "product_code",
                SecondarySort: "asc",
                ProductLineIds: "",
            },
            displayData: {},
            showPopSku: true,
            timer: null,
            isUp: true,
            isShowFilter: false,
            popTop: "",
            popitem: {},
            popinputAmount: null,
            popstock: null,
            poptype: null,
            popminNum: null,
            popUnitRatio: null,
            popLimitBuy: null,
            popaddNum: null,
            ProductName: "",
            poprefresh: false,
            isShowFilter: false,
            popTop: "",
            tagId: "",
            brandId: "",
            totalClassify: {},
            isFocus: false,
            selectionStart: -1,
            selectionEnd: 0,
            isIos: false,
            classData: [],
            num: 0,
            addNum: 1,
            cartRequestList: [],
            serchitem: {},
        }
    },
    watch: {
        //监听购物车数据
        getUpView(e) {
            //获取总数
            this.refresh()
        },
        productTagId(e) {
            if (e) {
                this.tagId = e
                this.tagloading(e)
            }
        },
        productBrandId(e) {
            if (e) {
                this.brandId = e
                this.brandloading(e)
                // this.checkIsFrom(false,e)
            }
        },
    },
    computed: {
        ...mapGetters(["getUpView"]),
    },
    onShow() {
        //多选规格批量操作回来返回UI处理
        //#ifdef MP
        let pages = getCurrentPages()
        let currPage = pages[pages.length - 1] //当前页
        // 直接用this.currPage.data去取B页面传递过来的数据
        this.isClosePop = currPage.data.isClosePop
        //#endif

        if (this.isClosePop) {
            this.$refs.popSku.close()
            this.isClosePop = false
        }
    },
    mounted() {
        if (getPlatform() == "ios") {
            this.isIos = true
        } else {
            this.isIos = false
        }
        this.getListHeight()
        this.getProductTypeTree()
        this.GetProductDisplay()
        if (this.getMenuStyle() == 1) {
            this.actions = [
                {
                    type: "cart",
                    id: 2,
                    iconType: 1,
                },
            ]
        }
        eventBus.$on("SET_CART", (msg) => {
            if (msg) {
                this.getCartNum(msg)
            }
        })
        // getUserCarList(res => {})
    },
    methods: {
        changeProductData(product) {
            this.optPopup.data = product
            this.optPopup.change = true
        },
        //获取购物车总数
        getCartNum(cartData) {
            this.num = cartData.length
            // getCartTotal(cartData, res => {
            // 	this.num = res.totalNum
            // })
        },
        popAmountClose() {
            this.$refs.popAmountTip.close()
            this.blurFn()
        },
        popAmountConfirm() {
            this.popitem.Amount = this.popinputAmount
            this.changeAmount(
                this.popitem,
                this.popitem.Amount,
                this.popstock,
                this.poptype,
                this.popminNum,
                this.popUnitRatio,
                this.popLimitBuy,
                this.popaddNum,
                this.ProductName,
            )
        },
        changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum, ProductName) {
            var that = this
            if (num == 999999 && type == 1) {
                return false
            }
            addNum = this.addNum
            const _oldAmount = item.Amount
            addNum = UnitRatio && UnitRatio == 1 ? addNum : 1
            addNum = addNum == 0 ? 1 : addNum
            utilsOld.changeAmountclassNew(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum)

            if (_oldAmount !== item.Amount || type === 0) {
                const _obj = {}
                _obj.ProductId = item.ProductId
                _obj.Amount = item.Amount
                _obj.SkuId = item.SkuId
                _obj.UnitId = item.UnitId
                _obj.UnitName = item.UnitName
                _obj.ValueId = item.ValueId
                _obj.Ratio = item.Ratio
                _obj.CartProductName = ProductName
                _obj.CartProductPrice = item.V_FactPrice
                _obj.CartProductImage = item.SkuModel.SkuImg
                _obj.CartProductAttribute = item.V_AttributeNameValue
                // this.setCarList(_obj)
                this.$forceUpdate()
                setTimeout((e) => {
                    that.$refs.popAmountTip.close()
                    this.blurFn()
                }, 500)
                this.optPopup.change = !this.optPopup.change
            }
        },
        setCarList(obj) {
            //商品购物车
            this.cartRequestList = []
            this.cartRequestList.push(obj)
            this.$forceUpdate()
        },
        changeAmountFn(item, ite, type, popdisplayData) {
            var that = this
            let num = Number(item.Amount)
            let stock = item.Stock
            let minNum = ite.MinNum
            let UnitRatio = item.Ratio
            let LimitBuy = ite.LimitBuy
            let addNum = ite.AddNum
            const _oldAmount = item.Amount

            if (popdisplayData.NoCheckStock) {
                if (type != 0) {
                    item.Amount = num + Number(type)
                } else {
                    item.Amount = num
                }
                if (item.Amount < 0) {
                    item.Amount = 0
                }
            } else {
                utilsOld.changeAmountNew(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum)
            }
            this.poprefresh = true
            this.$nextTick(() => {
                this.poprefresh = false
            })
            this.$forceUpdate()
            this.isUpNum(false)
            //商品
            if (_oldAmount !== item.Amount || type === 0) {
                const _obj = {}
                _obj.ProductId = item.ProductId
                _obj.Amount = item.Amount
                _obj.SkuId = item.SkuId
                _obj.UnitId = item.UnitId
                _obj.UnitName = item.UnitName
                _obj.Ratio = item.Ratio
                let param = []
                param.push(_obj)
                updateCart(param, false, true).then((res) => { })
            }
            setTimeout((e) => {
                that.$refs.popAmountTip.close()
                this.blurFn()
            }, 500)
        },
        blurFn() {
            this.$nextTick(() => {
                this.isFocus = false
                this.selectionStart = -1
                this.selectionEnd = -1
            })
        },
        foldToggle() {
            const that = this
            that.isFold = !this.isFold
            that.$nextTick(function () {
                that.getClassifyHeight()
            })
        },
        choseClassify(item) {
            if (this.activeId !== item.id) {
                this.resetClass(item, false)
            }
        },
        getTop() {
            getElementTop(this, ".pop", (e) => {
                this.popTop = e
            })
        },
        // 获取整体显示设置
        GetProductDisplay() {
            getProductDisplay().then((res) => {
                if (res) {
                    this.displayData = res.Data
                    // if(this.displayData.IsShowImg){
                    // 	this.actions = [{
                    // 		type: "icon-youtu",
                    // 		id: 3,
                    // 		iconType: 3
                    // 	}]
                    // }else{
                    // 	this.actions = [{
                    // 		type: "icon-wutu",
                    // 		id: 3,
                    // 		iconType: 3
                    // 	}]
                    // }
                }
            })
        },
        //标签
        getTagList(categoryId, brandId) {
            let path = "?categoryId=0&brandIds=0"
            if (categoryId) {
                path = "?categoryId=" + categoryId + "&brandIds=0"
            }
            if (brandId) {
                path = "?categoryId=" + categoryId + "&brandIds=" + brandId
            }
            getTagList(path).then((res) => {
                this.tags = res.Data
                this.checkIsFrom()
                this.$forceUpdate()
            })
        },
        //品牌
        productBrandList(id) {
            let path = "?categoryId=0"
            if (id) {
                path = "?categoryId=" + id
            }
            productBrandList(path).then((res) => {
                this.brands = res.Data
                this.$forceUpdate()
            })
        },
        //商品分类树列表
        getProductTypeTree() {
            let path = "?ids=" + this.classId
            GetProductCategoryList(path).then((res) => {
                this.getNavData(res)
            })
        },
        getNavData(res) {
            if (res) {
                this.initClassify = false
                this.classifyList = []

                if (this.isClass) {
                    let classId = Number(this.currentClass)
                    let classPath = ""

                    if (res.Data && res.Data.length > 0) {
                        res.Data.forEach((item) => {
                            if (item.id == classId) {
                                classPath = item.parent_path
                            }
                            this.classifyList.push(item)
                        })
                        //如果不是一级节点默认为第一个
                        if (!classPath) {
                            classPath = res.Data[0].parent_path
                            classId = res.Data[0].id
                        }
                    }
                    this.activeId = classId
                    this.requestData.typePath = classPath
                }
                this.filterClass(this.activeId)
                this.productBrandList(this.activeId)
                this.getTagList(this.activeId, false)
                // this.resetClass(this.classifyList[0]) 跳转分类
                setTimeout(() => {
                    this.refresh()
                }, 300)
            }
        },
        filterClass(activeId) {
            this.classData = []
            let path = "?ids=" + activeId
            GetProductCategoryList(path).then((res) => {
                this.classData = res.Data
            })
        },
        sort(num) {
            this.priceSort = num
            switch (num) {
                case 0:
                    this.requestData.OrderBy = "display_sequence"
                    this.requestData.Sort = "desc"
                    break
                case 1:
                    this.requestData.OrderBy = "grade_price"
                    this.requestData.Sort = "asc"
                    break
                case 2:
                    this.requestData.OrderBy = "grade_price"
                    this.requestData.Sort = "desc"
                    break
                case 3: // 已接收到数据
                    this.requestData.OrderBy = "product_code"
                    this.requestData.Sort = "asc"
                    break
                case 4:
                    this.requestData.OrderBy = "product_code"
                    this.requestData.Sort = "desc"
                    break
            }
        },
        checkIsFrom(tagId, brandId) {
            if (tagId) {
                let ids = []
                this.tags.forEach((e) => {
                    if (e.Id == this.tagId) {
                        e.checked = true
                        ids.push(this.tagId)
                    } else {
                        e.checked = false
                    }
                })
                this.requestData.BrandIds = ""
                this.requestData.TagIds = ids.join(",")
                this.refresh()
                this.$nextTick(() => {
                    this.$emit("productTagId", "")
                })
            }
            if (brandId) {
                let ids = []
                this.brands.forEach((e) => {
                    if (e.Id == this.brandId) {
                        e.checked = true
                        ids.push(this.brandId)
                    } else {
                        e.checked = false
                    }
                })
                this.requestData.TagIds = ""
                this.requestData.BrandIds = ids.join(",")
                this.refresh()
                this.$nextTick(() => {
                    this.$emit("productBrandId", "")
                })
            }
        },
        //刷新列表
        refresh() {
            this.$refs.swiperIndex.refresh(this.requestData)
        },
        //收藏触发更新
        upFavorite(infoType) {
            if (infoType == 2) {
                if (this.$refs.productList_0 && this.$refs.productList_0[0]) {
                    this.$refs.productList_0[0].refresh(this.requestData)
                }
            } else if (infoType == 0) {
                if (this.$refs.productList_2 && this.$refs.productList_2[0]) {
                    this.$refs.productList_2[0].refresh(this.requestData)
                }
            }
        },
        getListHeight(isHome = false) {
            //获取商品高度
            getElementHeight(this, ".main-dom", (e) => {
                e = isHome ? e - 54 : e
                this.initHeight = e
                this.listHeight = e + "px"
                if (this.isIos) {
                    this.listHeight1 = e - 62 + "px"
                    this.listHeight2 = e - 62 + "px"
                } else {
                    this.listHeight1 = e - 32 + "px"
                    this.listHeight2 = e - 32 + "px"
                }
                this.listHeightNoneSub = e + "px"
                this.loadOk = true
            })
        },
        getClassifyHeight() {
            if (this.secondClassifyList && this.secondClassifyList.length > 0) {
                const query = uni.createSelectorQuery().in(this)
                query
                    .select(".secondClassify")
                    .boundingClientRect((data) => {
                        let dataHeight = 0
                        if (data) {
                            dataHeight = Number(data.height)
                        }
                        this.listHeight1 = Number(this.initHeight) - dataHeight - 62 + "px"
                    })
                    .exec()
            } else {
                this.listHeight1 = this.listHeightNoneSub
            }
        },

        searchFn(searchText) {
            //搜索
            this.requestData.search = searchText

            if (this.isClass) {
                this.requestData.BrandIds = ""
                this.cancelFilterBrands()
                if (this.serchitem.id) {
                    this.resetClass(this.serchitem)
                } else {
                    this.resetClass(this.classifyList[0])
                }
            } else {
                this.$refs.productFilter.reSet()
                this.requestData.BrandIds = ""
                this.requestData.TagIds = ""
                this.resetClass(this.classifyList[0])
            }

            if (this.getMenuStyle() == 0 || this.getMenuStyle() == 2) {
                this.$refs.productFilter.hideAllPop()
            }
        },
        resetClass(item, bool = true) {
            const that = this
            that.activeId = item.id
            that.typePath = item.parent_path
            that.requestData.typePath = item.parent_path
            // if (!that.isUp) {
            // 	that.$emit("upCart", true)
            // 	that.isUp = true
            // }
            // that.$nextTick(function() {
            // 	that.getClassifyHeight()
            // })
            this.requestData.BrandIds = ""
            this.requestData.TagIds = ""
            this.requestData.typePaths = ""
            this.cancelFilterBrands()
            this.filterClass(this.activeId)
            that.productBrandList(item.id)
            this.getTagList(item.id, false)
            this.$forceUpdate()
            that.refresh()
        },
        goCart() {
            uni.navigateTo({
                url: "/pages/cart/cartTemp",
            })
        },
        actionFn(actionItem) {
            //功能点击
            if (actionItem.id == 1) {
                //扫一扫
                this.scan()
            } else if (actionItem.id == 2) {
                //进入购物车
                this.goCart()
            } else if (actionItem.id == 3) {
                //有图无图切换
                this.changeListTheme()
            }
            if (this.getMenuStyle() == 0 || this.getMenuStyle() == 2) {
                this.$refs.productFilter.hideAllPop()
            } else if (this.getMenuStyle() == 1) {
                this.isShowFilter = false
            }
        },
        scan() {
            //扫一扫
            //#ifdef MP||APP-PLUS
            // 允许从相机和相册扫码
            uni.scanCode({
                success: function (res) {
                    uni.showToast({
                        title: "扫码结果:" + res.result,
                        icon: "none",
                        duration: 2000,
                    })
                },
            })
            //#endif
        },
        changeListTheme(isShow) {
            //切换商品列表无图显示
            let change = this.displayData.IsShowImg == 1 ? 0 : 1
            this.displayData.IsShowImg = change
            if (this.displayData.IsShowImg) {
                this.actions = [
                    {
                        type: "icon-youtu",
                        id: 3,
                        iconType: 3,
                    },
                ]
            } else {
                this.actions = [
                    {
                        type: "icon-wutu",
                        id: 3,
                        iconType: 3,
                    },
                ]
            }
            this.$forceUpdate()
        },
        sku(item) {
            this.showPopSku = true
            this.optPopup.type = "attr"
            this.optPopup.data = item
            this.$refs.popSku.open()
        },
        amountProp(item, num, stock, type, minNum, UnitRatio, LimitBuy, addNum, ProductName) {
            this.popitem = item
            this.popinputAmount = num
            this.popstock = stock
            this.poptype = type
            this.popminNum = minNum
            this.popUnitRatio = UnitRatio
            this.popLimitBuy = LimitBuy
            this.popaddNum = addNum
            this.ProductName = ProductName

            this.$refs.popAmountTip.open()
            setTimeout((e) => {
                this.isFocus = true
                this.selectionStart = 0
                this.selectionEnd = this.popinputAmount.toString().length
            }, 100)
        },
        addCart(e) {
            this.$refs.popSku.close()
        },
        addCartBatch(e) { },
        addBatch(e) {
            this.$refs.popSku.close()
            this.$refs.popBatch.open()
        },
        buyNow() { },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                clearTimeout(this.timer)
                this.timer = setTimeout((time) => {
                    this.tabIndex = index
                    this.requestData.infoType = index
                }, 20)
                if (!this.isUp) {
                    this.$emit("upCart", true)
                    this.isUp = true
                }
            }
            this.$refs.productFilter.hideAllPop()
        },
        // 点击分类事件
        treeClickEvent(item) {
            this.serchitem = item
            if (this.activeId !== item.id) {
                this.resetClass(item)
            }
        },
        closePopup() {
            this.$refs.popSku.close()
        },
        setCarListFunc() {
            this.$forceUpdate()
        },
        closePopupBatch() {
            this.$refs.popBatch.close()
        },
        setCarListFuncBatch() {
            this.$forceUpdate()
        },
        filterFn(data) {
            this.requestData.OrderBy = data.OrderBy
            this.requestData.Sort = data.Sort
            this.refresh()
        },
        filterClassFn() {
            let ids = []
            this.classData.forEach((e) => {
                if (e.checked) {
                    ids.push(e.parent_path)
                }
            })
            if (ids.length > 0) {
                this.requestData.typePaths = ids.join(",")
            }
        },
        filterBrandFn() {
            let ids = []
            this.brands.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Id)
                }
            })
            this.requestData.BrandIds = ids.join(",")
        },

        filterTagFn() {
            let ids = []
            this.tags.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Id)
                }
            })

            this.requestData.TagIds = ids.join(",")
        },
        skuChange(e) {
            if (!e.show) {
                this.showPopSku = false

                // this.$nextTick(e=>{
                // 	this.showPopSku = true
                // })
            }
        },
        isUpNum(e) {
            this.isUp = e
        },
        getMenuStyle() {
            if (this.isClass) {
                return 1
            }
            if (this.displayData && typeof this.displayData.CategoryStyle == "number") {
                return this.displayData.CategoryStyle
            }
            return config.appSet.proMenuStyle
        },
        getIsFilter() {
            let isFilter =
                (this.requestData.BrandIds && this.requestData.BrandIds != "") ||
                (this.requestData.minPrice && this.requestData.minPrice != 0) ||
                (this.requestData.maxPrice && this.requestData.maxPrice != 0)
            return isFilter
        },
        filter() {
            this.filterOpen()
        },
        // 修改品牌筛选
        changeBrand(index) {
            this.brands[index].checked = !this.brands[index].checked
            let ids = []
            this.brands.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Id)
                }
            })
            this.getTagList(this.activeId, ids.join(","))
            this.$forceUpdate()
        },
        // 修改分类筛选
        changeClass(index) {
            this.classData[index].checked = !this.classData[index].checked
            let ids = []
            this.classData.forEach((e) => {
                if (e.checked) {
                    ids.push(e.id)
                }
            })
            if (ids.length > 0) {
                this.productBrandList(ids.join(","))
                this.getTagList(ids.join(","), false)
            } else {
                this.productBrandList(this.activeId)
                this.getTagList(this.activeId, false)
            }

            this.$forceUpdate()
        },
        // 修改标签筛选
        changeTag(index) {
            this.tags[index].checked = !this.tags[index].checked
            this.$forceUpdate()
        },
        filterBrandFn1() {
            this.filterClassFn()
            this.filterBrandFn()
            this.filterTagFn()
            this.filterClose()
            this.refresh()
        },

        cancelFilterBrands() {
            this.brands.forEach((e) => {
                e.checked = false
            })
            this.tags.forEach((e) => {
                e.checked = false
            })
            this.classData.forEach((e) => {
                e.checked = false
            })
            this.requestData.typePaths = ""
            // this.requestData.minPrice = 0
            // this.requestData.maxPrice = 0

            delete this.requestData.minPrice
            delete this.requestData.maxPrice
            this.priceSort = 0
            this.productBrandList(this.activeId)
            this.getTagList(this.activeId, false)
            this.$forceUpdate()
        },
        loadNoMoreBack(e) {
            if (e) {
                let objItem = {}
                let hasIn = false
                if (!this.classifyList || this.classifyList.length < 1) {
                    return
                }
                if (this.activeId == this.classifyList[0].id) {
                    //当前是全部分类
                    this.treeClickEvent(this.classifyList[1])
                } else {
                    for (var i = 0; i < this.classifyList.length; i++) {
                        let item = this.classifyList[i]
                        if (item.id == this.activeId) {
                            //判断当前是否是大类
                            this.hasIn = true
                            if (i != this.classifyList.length - 1) {
                                objItem = this.classifyList[i + 1]
                            } else {
                                objItem = this.classifyList[0]
                            }
                            this.treeClickEvent(objItem)
                            return
                        }
                    }
                    if (!hasIn) {
                        for (var i = 1; i < this.classifyList.length; i++) {
                            let item = this.classifyList[i]
                            let path = item.parent_path
                            if (this.typePath.includes(path)) {
                                let item = this.classifyList[i]
                                if (i != this.classifyList.length - 1) {
                                    objItem = this.classifyList[i + 1]
                                } else {
                                    objItem = this.classifyList[0]
                                }
                                this.treeClickEvent(objItem)
                                return
                            }
                        }
                    }
                }
            }
        },
        filterOpen() {
            this.$refs.showRight.open()
        },
        filterClose() {
            this.$refs.showRight.close()
        },
    },
}
</script>

<style lang="scss">
.stop-scroll {
    position: fixed;
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.product-main {
    display: flex;
    flex-direction: row;

    .product-main-nav {
        display: flex;
        flex: 1.3;
        flex-direction: column;
        // background: $uni-bg-color-grey;
        position: relative;
        z-index: 10;
        overflow-y: scroll;
    }

    .product-main-list {
        // display: flex;
        flex: 3.5;
        // justify-content: center;
        background: $uni-bg-color-grey;
        position: relative;
        z-index: 1;
        margin-left: -8rpx;
    }

    .p-b-120 {
        padding-bottom: 120rpx;
    }
}

.swiper {
    background: $color-white;
}

.product-main-1 {
    .product-main-list {
        padding: 0 $app-page-padding;
        background: $uni-bg-color-grey;
    }

    .p-b-120 {
        padding-bottom: 120rpx;
    }
}

.nav-bar {
    display: flex;
    height: 88rpx;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    background: $color-white;
    border-bottom: solid 1rpx $line;

    .nav-bar-scroll {
        display: flex;
        flex-direction: row;
        width: calc(100% - 110rpx);
    }

    .nav-bar-action {
        display: flex;
        flex-direction: row;
        align-items: center;

        .line {
            width: 1rpx;
            height: 26rpx;
            background: #ccc;
        }

        .filter-box {
            min-width: 60rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 28rpx;

            .filter-box-icon {
                display: flex;
            }

            .filter-box-text {
                font-size: $font-size-20;
            }
        }
    }
}

.secondClassify {
    width: 100%;
    box-sizing: border-box;
    background: $color-white;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 32rpx 50rpx 0 20rpx;
    position: relative;

    .secondClassify-item {
        flex-shrink: 0;
        flex-grow: 0;
        padding: 6rpx 16rpx;
        font-size: $font-size-26;
        line-height: 1.5;
        background-color: $color-gray-5;
        border-radius: 42rpx;
        margin: 0 24rpx 24rpx 0;
    }

    .active-item {
        color: $color-white;
        background: $color-main;
    }

    .fold-icon {
        position: absolute;
        width: 50rpx;
        height: 50rpx;
        top: 32rpx;
        right: 0;
        background: $color-white;
        padding-left: 16rpx;

        // background: #eee;
        &:after {
            content: "";
            position: absolute;
            top: 10rpx;
            left: 14rpx;
            width: 15rpx;
            height: 15rpx;
            transform: rotate(45deg);
            border: 2rpx solid;
            border-color: transparent $color-gray-3 $color-gray-3 transparent;
        }
    }

    .unfold-icon {
        &:after {
            transform: rotate(-135deg);
            top: 20rpx;
        }
    }
}

.secondClassify-unfold {
    flex-wrap: wrap;
}

.botline {
    height: 1rpx;
    background: #ebebeb;
}

.color3 {
    color: $color-gray-3;
    font-size: 24rpx;
}

.filter-price {
    display: flex;
    justify-content: space-around;

    .price-box {
        input {
            text-align: center;
        }
    }
}

.drawer-scroll {
    height: 98%;
}
</style>
